<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
		<script type="text/javascript">
		
		var hey = "hey";
		
		// getting url param.
		function getURLParameter(name) {
			var s = decodeURI(
				(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
			);
			// Create a regular expression to search all +s in the string
			var lsRegExp = /\+/g;
			// Return the decoded string
			return unescape(String(s).replace(lsRegExp, " ")); 
		}
		
		// visualize search result
		function setSearchResult(data){
			var str = '<div id="books">';
			console.log(data);
	
			
			//try {
				for (var i = 0; i < data.items.length; i++){
					var item = data.items[i];
					var imglinks = item.volumeInfo.imageLinks;
					var title = item.volumeInfo.title;
					var authors = item.volumeInfo;
					var bookpage = "book/"+item.id;
					
					//var selflink = item.selfLink;
					
					if (typeof(imglinks) != 'undefined'){
						thumb = imglinks.thumbnail;//smallThumbnail;
						str += '<div class="book"><a href="'+bookpage+'" data-ajax="false"><img src="'+thumb+'" /></a></div>'; // TODO: alright?
					}
					else{
						str += '<div class="book"><div style="height:60px;padding:26px 0px;width:80px;background-color: #f9f9f9; border: 1px solid #e0e0e0;display: block; text-align: center; position: absolute;bottom: 0px;font-size: 12px"><a href="'+bookpage+'" data-ajax="false">'+title+'</a></div></div>'; // TODO: alright?
						//thumb = 'http://www.rockymountainsmiths.org/library/Placeholder_book.png'; // placeholder
					}
					  
					
					
					// TODO: pageCount or dimensions to visualize 
				  
				}
				str +="</div>"
				$('#result').empty();
				$('#result').append(str);
			//}
			// exception for no data
			/*catch (err){
				console.log(str);
				console.log(err);
				return false;
			}*/
		}
		
		$(document).ready(function() {
			
			////
			//	searching books
			////
			var search = getURLParameter('search');
			
			if (search == 'null') return; // if no search query, then show user's recent books
			search.replace('+', '%2B');
			search[3] = 's';
			console.log(search[3]);
			console.log(search)
			$('#search').attr('value', search)
			
			$('#result').html('finding...');

			var key = 'AIzaSyCSPRhfVqueRQ5KzjvRqSSHZEOmUBYv0Lc';
			var apiurl = 'https://www.googleapis.com/books/v1/volumes?q='+search+'&key='+key;
			// '&langRestrict='+'ko';
	
			$.ajax({
				url: apiurl,
				success: setSearchResult,
				crossDomain: true,
				dataType: "jsonp"
			});
		});
		
		
		</script>
		<style type="text/css">
		#books {
			margin: 0px 10px;
			background: blue;
		}
		
		.book {
			position: relative;
			width: 80px;
			height: 150px;
			
			margin: 3px 0px;
			padding: 0px 4px;
			
			float: left;
			
			border-bottom-width:5px;
			border-bottom-style:solid;
			border-bottom-color: grey;
		}

		.book img {
			width: 80px;
			position: absolute;
			bottom: 0px;
			/*max-width: 85px;
			max-height: 140px;*/
		}
		</style>
	</head> 
	<body> 
	<div data-role="page" >
        <div data-role="header" >
            <h1>Bookshelf</h1>
        </div>
        <div data-role="content">
			<div data-inline="true">
			<form>
					<input type="search" name="search" id="search" data-inline="true"/>
					<!--input type="submit" value="Search"data-icon="search" data-inline="true"/-->
				
			</form>
			<div id="result">
			</div>
			</div>	
		</div>
		
        <!--div data-role="footer" data-position="fixed">
            <h1>@page42	</h1>
        </div-->
    </div>
	</body> 
</html> 
 